<template>
  <div>
    <div style="display: flex">
      <el-card body-style="display: flex;justify-content: space-between">
        <i style="color: #1296db" class="el-icon-document"></i>
        <div style="padding-right: 20px">
          <h4>总订单</h4>
          <p>{{ obj.totalOrder }}</p>
        </div>
      </el-card>
      <el-card body-style="display: flex;justify-content: space-between">
        <i style="color: #d63082" class="el-icon-coin"></i>
        <div>
          <h4>总销售额</h4>
          <p>{{ obj.totalAmount }}</p>
        </div>
      </el-card>
      <el-card body-style="display: flex;justify-content: space-between">
        <i style="color: #1296db" class="el-icon-s-order"></i>
        <div>
          <h4>今日订单数</h4>
          <p>{{ obj.todayOrder }}</p>
        </div>
      </el-card>
      <el-card body-style="display: flex;justify-content: space-between">
        <i style="color: #1afa29" class="el-icon-present"></i>
        <div>
          <h4>今日销售额</h4>
          <p>{{ obj.totayAmount }}</p>
        </div>
      </el-card>
    </div>

    <div
      id="main"
      style="
        width: 99%;
        margin-left: 1%;
        margin-top: 50px;
        height: 400px;
        background-color: #fff;
      "
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { totaldata } from "@/apis/echartsData";
export default {
  data() {
    return {
      obj: {},
    };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById("main"));

    totaldata().then((res) => {
      // console.log(res);
      this.obj = res.data;
      this.myChart.setOption({
        title: {
          text: "折线图堆叠",
          top: 10,
          left: 10,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单数据", "金额数据"],
          top: 10,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数据",
            type: "line",
            stack: "总量",
            data: res.data.orderData,
          },
          {
            name: "金额数据",
            type: "line",
            stack: "总量",
            data: res.data.amountData,
          },
        ],
      });
    });
  },
};
</script>

<style lang="less" scoped>
.el-card {
  width: 25%;
  margin-left: 10px;
  i {
    font-size: 50px;
  }
  h4 {
    margin-bottom: 5px;
    font-size: 20px;
    color: #dbdbdb;
  }
  p {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
  }
}
</style>